<template>
  <div id="schedule_s">
    <!--header-->
    <sticky>
      <x-header :left-options="{showBack: false}">每周食谱</x-header>
    </sticky>

    <div style="width: 100%;overflow-x:auto;-webkit-overflow-scrolling:touch;">
      <tab v-model="tabSelect" style="width:500px;" :line-width="0">
        <tab-item v-for="item of tabList">{{item}}</tab-item>
      </tab>
    </div>

    <!--scroller-->
    <scroller lock-x height="-130px" style="background: #fff;margin: 0 20px;border-radius: 10px">
      <div style="font-size: 1.3em;padding: 10px 20px">食谱</div>
      <group>
        <x-textarea v-model="breakfast" placeholder="请输入早餐食谱" readonly></x-textarea>
        <x-textarea v-model="lunch" placeholder="请输入午餐食谱" readonly></x-textarea>
        <x-textarea v-model="dinner" placeholder="请输入晚餐食谱" readonly></x-textarea>
      </group>
    </scroller>
  </div>
</template>

<script>
  import {
    XHeader,
    Tab,
    TabItem,
    Sticky,
    Scroller,
    Group,
    XButton,
    Flexbox,
    FlexboxItem,
    XTextarea
  } from 'vux'

  export default {
    components: {
      XHeader,
      Tab,
      TabItem,
      Sticky,
      Scroller,
      Group,
      XButton,
      Flexbox,
      FlexboxItem,
      XTextarea
    },
    data() {
      return {
        tabSelect: new Date().getDay() - 1,
        tabList: ['周一', '周二', '周三', '周四', '周五'],
        breakfast: '',
        lunch: '',
        dinner: '',
        dates: new Date().toLocaleDateString()
      }
    },
    mounted() {
      this.loadList()
    },
    methods: {
      loadList() {
        this.$http.get('/api/menus', {
          params: {
            date: this.dates
          }
        }).then((r) => {
          try {
            this.breakfast = r.data.data[0].menus[0]
            this.lunch = r.data.data[0].menus[1]
            this.dinner = r.data.data[0].menus[2]
          } catch (e) {
            this.breakfast = this.lunch = this.dinner = ''
            this.$vux.toast.text('所选日暂无食谱')
          }
        })
      },
      doSubmit() {
        this.$http.post('/api/menu/post', {
          dates: this.dates,
          menus: [this.breakfast, this.lunch, this.dinner]
        }).then((r) => {
          this.$vux.toast.text('成功')
        })
      },
      GetDateStr(AddDayCount) {
        const dd = new Date()
        dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
        const y = dd.getFullYear()
        const m = dd.getMonth() + 1 // 获取当前月份的日期
        const d = dd.getDate()
        return `${y}/${m}/${d}`
      },
      doEmpty() {
        this.breakfast = this.lunch = this.dinner = ''
      }
    },
    watch: {
      tabSelect() {
        this.$vux.loading.show({
          text: 'loading'
        })
        this.dates = this.GetDateStr(this.tabSelect + 1 - new Date().getDay())
        this.loadList()
        this.$nextTick(function () {
          this.$vux.loading.hide()
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../assets/css/theme.css';
  @import '~vux/src/styles/1px.less';
  @import '~vux/src/styles/center.less';

  .vux-slider .vux-swiper-item {
    background-color: #fff;
  }

  .tab-swiper {
    background-color: #fff;
  }

  .hp-search-input {
    display: block;
    margin: 1em auto;
    width: 80%;
    text-align: left;
    outline: none;
    height: 2em;
    padding-left: 10%;
  }

  .hp-search {
    position: relative;
  }

  .hp-search-icon {
    position: absolute;
    top: 2px;
    left: 5%;
    fill: #9c9faa;
  }

  .role-item {
    border: 1px solid #ececec;
    padding: 5px 15px;
    background: #fff;
  }

  .role-item-selected {
    border: 1px solid #0084ff;
  }

  .box {
    padding: 10px 15px;
  }

  #schedule_s {
    height: 100%;
    overflow: hidden;
  }
</style>
